<template>
  <el-col :span="formspan" v-if="visible">
    <!--隐藏文本域-->
    <div v-if="componentName == 'form-hidden'">
      <input type="hidden" :name="prop" v-model="currentValue" />
    </div>
    <!-- 下拉框 -->
    <el-form-item
      v-if="componentName == 'form-select'"
      :prop="prop"
      :label="column.label"
      :span="column.itemspan"
    >
      <el-select
       :filterable="column.filterable"
        v-model="currentValue"
        @change="column._change"
        :placeholder="placeholder"
        v-bind:disabled="disabled"
      >
        <el-option
          v-for="(item, index) in column.options"
          :value="item.value"
          :label="item.label"
          :key="index"
          >{{ item.label }}</el-option
        >
      </el-select>
      <span v-if="column.desc">{{ column.desc }}</span>
    </el-form-item>

    <!-- 文本框 -->
    <el-form-item
      v-else-if="componentName == 'form-input'"
      :prop="prop"
      :label="column.label"
    >
      <el-input
        :name="prop"
        v-bind:disabled="disabled"
        :maxlength="maxlength"
        show-word-limit
        :span="itemspan"
        :placeholder="placeholder"
        v-model="currentValue"
      ></el-input>
    </el-form-item>

    <!-- 描述框 -->
    <el-form-item
      v-else-if="componentName == 'form-textarea'"
      :prop="prop"
      :label="column.label"
    >
      <el-input
        type="textarea"
        :name="prop"
        v-bind:disabled="disabled"
        :maxlength="maxlength"
        :span="itemspan"
        show-word-limit
        :placeholder="placeholder"
        v-model="currentValue"
        show-word-limit
      ></el-input>
    </el-form-item>

    <!-- 日期框  时间框 -->
    <el-form-item
      v-else-if="componentName == 'form-date'"
      :prop="prop"
      :label="column.label"
    >
      <el-date-picker
        v-model="currentValue"
        type="date"
        :name="prop"
        @change="column._change?column._change:()=>{}"
        @click="column._click?column._click:()=>{}"
        v-bind:disabled="disabled"
        :placeholder="placeholder"
        value-format="yyyy/MM/dd"
      >
      </el-date-picker>
    </el-form-item>

    <!--   时间框 -->
    <el-form-item
      v-else-if="componentName == 'form-datetime'"
      :prop="prop"
      :label="column.label"
    >
      <el-date-picker
        v-model="currentValue"
        type="datetime"
        :name="prop"
        @change="column._change?column._change:()=>{}"
        :span="itemspan"
        @click="column._click?column._click:()=>{}"
        v-bind:disabled="disabled"
        :placeholder="placeholder"
        value-format="yyyy/MM/dd HH:mm:ss"
        default-time="12:00:00"
      >
      </el-date-picker>
    </el-form-item>

    <!-- 时间范围 -->
    <el-form-item
      v-else-if="componentName == 'form-datetimerange'"
      :prop="prop"
      :label="column.label"
    >
      <el-date-picker
        v-model="currentValue"
        type="datetimerange"
        name="item.name"
        @change="column._change?column._change:()=>{}"
        :span="itemspan"
        @click="column._click?column._click:()=>{}"
        v-bind:disabled="disabled"
        :placeholder="placeholder"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </el-form-item>

    <!-- 单选框 -->
    <el-form-item
      v-else-if="componentName == 'form-radio'"
      :prop="prop"
      :label="column.label"
    >
      <el-radio
        v-for="(item, index) in column.options"
        v-model="currentValue"
        :key="index"
        :label="item.value"
        :span="itemspan"
        v-bind:disabled="disabled?true:(item.disabled?true:false)"
        >{{ item.label }}</el-radio
      >
    </el-form-item>

    <!-- 单选switch -->
    <el-form-item
      v-else-if="componentName == 'form-switch'"
      :prop="prop"
      :label="column.label"
    >
      <el-switch
        style="display: block"
        v-model="currentValue"
        v-bind:disabled="disabled"
      >
      </el-switch>
    </el-form-item>

    <!-- 复选框 -->
    <el-form-item
      v-else-if="componentName == 'form-checkbox'"
      :prop="prop"
      :label="column.label"
    >
      <el-checkbox-group v-model="currentValue">
        <el-checkbox
          v-for="(item, index) in column.options"
          :label="item.label"
          :key="index"
          :span="itemspan"
          :value="item.value"
          v-bind:disabled="disabled?true:(item.disabled?true:false)"
        ></el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 计数器 -->
    <el-form-item
      v-else-if="componentName == 'form-inputNumber'"
      :prop="prop"
      :label="column.label"
    >
      <el-input-number
        v-model="currentValue"
        v-bind:disabled="disabled"
        :span="itemspan"
        :min="column.min ? column.min : 0"
        :max="column.max ? column.max : 100"
        :step="column.step ? column.step : 1"
      >
      </el-input-number>
    </el-form-item>
  </el-col>
</template>

<script>
export default {
  name: 'form-itemall',
  model: {
    // 双向绑定
    prop: 'value',
    event: 'input'
  },
  props: {
    prop: String,
    value: [String, Boolean, Object, Array, Number],
    placeholder: String,
    disabled: {
      type: Boolean,
      default: false
    },
    maxlength: String,
    column: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      default: true
    },
    // 行列 24等分
    formspan: {
      type: Number,
      default: 10
    },
    // 24等分
    itemspan: {
      type: Number,
      default: 23
    }
  },
  data () {
    return {
      componentName: '',
      currentValue: ''
    }
  },
  computed: {
    $myProps () {
      return this.$public.inheritProps(this)
    },
    $myListeners () {
      return this.$public.inheritListeners(this)
    }
  },
  created () {
    this.componentName = this.$myProps.componentName
  },
  watch: {
    value: {
      // 监听传值
      immediate: true,
      handler (newVal, oldVal) {
        this.currentValue = newVal
      }
    },
    currentValue: {
      // 监听值便变更返回并返回
      immediate: true,
      handler (newVal, oldVal) {
        this.$emit('input', newVal)
      }
    },
    visible: {
      handler (newVal, oldVal) {
        console.log(newVal, 1)
      }
    }
  }
}
</script>

<style>
    /* 防止变短 */

    /* .el-select {
        display: block !important;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }

    el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100% !important;
    } */
    /* 滚动条显示  以及最大高度 */

    /* .el-scrollbar__wrap {
        overflow: auto;
        max-height: 240px;
    } */
    /* 下拉框地板间距样式 */

    /* .el-popper[x-placement^="bottom"] {
        padding-bottom: 5px;
    } */
</style>
